<template>
  <view class="game-container">
    <view class="score">分数：{{ score }} </view>
    <view class="time">用时：{{ count }} 秒</view>
    <view class="grid">
      <view
        v-for="(item, idx) in 100"
        :key="idx"
        class="cell"
        :class="{ blue: idx === blueIndex }"
        @click="handleClick(idx)"
      >
        <!-- 加分/减分动画 -->
        <view
          v-if="showAnim && animIdx === idx"
          :class="['score-anim', animType]"
        >
          {{ animType === 'plus' ? '+1' : '-1' }}
        </view>
      </view>
    </view>
    <button class="restart-btn" @click="restart">重新开始</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

const count = ref(0);
let time;

const score = ref(0)
const blueIndex = ref(Math.floor(Math.random() * 100))

// 动画相关
const showAnim = ref(false)
const animType = ref('plus') // 'plus' or 'minus'
const animIdx = ref(-1)
let animTimer = null

onShow(()=>{
  time=setInterval(()=>{
    count.value++;
  },1000)
})

onHide(()=>{
  clearInterval(time);
  count.value=0;
})

function randomBlue() {
  blueIndex.value = Math.floor(Math.random() * 100)
}

function handleClick(idx) {
  if (idx === blueIndex.value) {
    score.value++
    animType.value = 'plus'
  } else {
    score.value--
    animType.value = 'minus'
  }
  animIdx.value = idx
  showAnim.value = true
  clearTimeout(animTimer)
  animTimer = setTimeout(() => {
    showAnim.value = false
  }, 600)
  randomBlue()
}

function restart() {
  score.value = 0
  count.value = 0
  randomBlue()
}
</script>

<style scoped>
.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  min-height: 100vh;
  background: #f7f7f7;
}
.score {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}
.time {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.grid {
  width: 500rpx;
  height: 500rpx;
  display: flex;
  flex-wrap: wrap;
  border: 2rpx solid #333;
  background: #222;
  margin-bottom: 30rpx;
}
.cell {
  width: 10%;
  height: 10%;
  background: #111;
  border: 1rpx solid #333;
  box-sizing: border-box;
  transition: background 0.2s;
  position: relative;
  overflow: visible;
}
.cell.blue {
  background: #2196f3;
}
.score-anim {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -80%);
  font-size: 32rpx;
  font-weight: bold;
  pointer-events: none;
  animation: pop-move 0.6s;
}
.score-anim.plus {
  color: #4caf50;
}
.score-anim.minus {
  color: #e53935;
}
@keyframes pop-move {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.8);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -40%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(1);
  }
}
.restart-btn {
  width: 220rpx;
  height: 60rpx;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 30rpx;
  font-size: 28rpx;
  margin-top: 20rpx;
}
</style>